<!-- 普通模式演示(vue) -->
<template>
	<view class="content">
		<z-paging ref="paging" v-model="data.dataList" @query="queryList">
			<template #top>
				<view class="u-tabs-box ">
					<u-sticky bgColor="#fff">
						<u-tabs activeColor="#4787F0" :list="tabList_" :current='tabIndex_' @change="tabChange_"
							:is-scroll="false" :activeStyle="tabActiveStyle" :itemStyle="tabItemStyle_"
							:inactive-style="tabInactiveStyle" lineHeight="1" lineWidth="56" lineColor="#4787F0"
							swiperWidth="750"></u-tabs>
					</u-sticky>
				</view>
				<view class="u-tabs-box ">
					<u-sticky bgColor="#fff">
						<u-tabs activeColor="#4787F0" :list="tabList" :current='tabIndex' @change="tabChange"
							:is-scroll="false" :activeStyle="tabActiveStyle" :itemStyle="tabItemStyle"
							:inactive-style="tabInactiveStyle" lineHeight="1" lineWidth="56" lineColor="#4787F0"
							swiperWidth="750"></u-tabs>
					</u-sticky>
				</view>
				<u-search placeholder="搜索合同名称" v-model="keyword" shape="square" :showAction="false" margin="20rpx"
					@search="search" @clear="clear" height="80rpx" placeholderColor="rgba(0,0,0,0.4)"></u-search>
			</template>
			<view class="card" v-for="(item,index) in data.dataList" :key="index">
				<view class="card-header"
					@click="goNav(`${pageUrl['contractDetailUrl'][userType]}?member_contract_id=${item.member_contract_id}&signer_type=${signer_type}`)">
					<view>
						<image src="../../static/images/root-list.png" style="vertical-align: middle;"></image>
						<text>{{ item.member_contract_title }}</text>
					</view>
					<u-tag :text="item.member_contract_type_name" size="mini" type="warning"></u-tag>
				</view>
				<u-line dashed></u-line>
				<view class="card-body m-t-32"
					@click="goNav(`${pageUrl['contractDetailUrl'][userType]}?member_contract_id=${item.member_contract_id}&signer_type=${signer_type}`)">
					<view class="flex justify-space-between" style="align-items: center;">
						<view class="flex" style="align-items: center;">
							<u-badge :isDot="true" type="warning" max="99"></u-badge>
							<text style="padding-left: 12rpx;color: rgba(0,0,0,0.9);">
								{{ item.member_contract_sign_status_name }}
							</text>
						</view>
						<view
							style="width: 40rpx;height: 40rpx;border: 2rpx solid rgba(0,0,0,0.2);border-radius: 40rpx;line-height: 40rpx;display: flex;align-items: center;">
							<u-icon name="arrow-rightward" color="#999999" style="margin-left: 5rpx;"></u-icon>
						</view>
					</view>
					<text style="display: block;color: rgba(0,0,0,0.9);margin-top: 16rpx;">
						{{ item.member_contract_show_name }}
					</text>
					<view class="flex justify-space-between">
						<text style="display: block;padding-top: 16rpx;"> 合同分类：{{ item.member_contract_category_name }}
						</text>
					</view>
					<view class="flex justify-space-between" style="align-items: center;">
						<text style="display: block;color: rgba(0,0,0,0.6);padding-top: 16rpx;">
							签署截止日期：{{ item.member_contract_end_date }}
						</text>
						<u-tag :text="'更多'" size="mini" plain icon="edit-pen" v-if="tabIndex_ == 0" type="primary"
							@click="moreObj.open(item)"></u-tag>
					</view>
				</view>
			</view>
		</z-paging>
		<view @click.stop="iconClick(`initiateUrl.${userType}`)" class="initiate">发起合同</view>
		<view @click.stop="iconClick(`templateUrl.${userType}`)" class="templateList">使用模板</view>
		<!-- <image @click.stop="changeTypeShow = true" class="changeType" src="../../static/images/change-icon.png"></image> -->
	</view>
	<u-overlay :show="changeTypeShow">
		<view class="changeType-box">
			<u-icon name="close" size="26" @click.stop="changeTypeShow = false" color="#ffffff" :custom-style="{
			position: 'absolute',
			    top: '300rpx',
			    right: '100rpx'
		}"></u-icon>
			<view class="type-item" :class="[ type == 1? 'item-active':'']" @click="changeType(1)">
				<u-icon name="checkmark" size="26" color="#4787F0" v-if="type == 1"></u-icon> 我发起的合同
			</view>
			<view class="type-item" :class="[ type == 2? 'item-active':'']" @click="changeType(2)">
				<u-icon name="checkmark" size="26" color="#4787F0" v-if="type == 2"></u-icon> 邀请我的合同
			</view>
		</view>
	</u-overlay>
	<Tabbar :current-page="3"></Tabbar>
	<ModalSelect ref="moreRef" @returnFun="moreObj.returnFun"></ModalSelect>
	<edit-recipient-page ref="recipientRef" @returnFun="recipientObj.returnFun"></edit-recipient-page>
	<edit-audit-page ref="auditRef" @returnFun="auditObj.returnFun"></edit-audit-page>
</template>
<script setup>
	import ModalSelect from "../../components/ModalSelect.vue";
	import {
		contractList,
		contractUserList,
		membercontractList,
		memberinviteList
	} from "../../api/module/contract.js"
	import {
		reactive,
		ref
	} from 'vue'
	import {
		arrayGet,
		goNav,
		inObject,
		msg,
		pageUrl
	} from "../../utils/common";
	import {
		useStore
	} from 'vuex';
	import {
		tabActiveStyle,
		tabInactiveStyle,
		tabItemStyle,
		tabItemStyle_
	} from "../../utils/style";
	import {
		authentication
	} from "../../utils/contract/isAuthentication.js"
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import EditRecipientPage from "../../components/edit-recipient-page.vue";
	import EditAuditPage from "../../components/edit-audit-page.vue";
	const tabList_ = [{
		name: '我发送的',
		value: '1'
	}, {
		name: '我签署的',
		value: '2'
	}];
	const tabList = [{
		name: '全部',
		value: ''
	}, {
		name: '待签署',
		value: 'pending'
	}, {
		name: '签署中',
		value: 'handle'
	}, {
		name: '已过期',
		value: 'overdue'
	}, {
		name: '已签署',
		value: 'signed'
	}];
	const options = [{
		text: '选项1',
		value: 'option1'
	}, {
		text: '选项2',
		value: 'option2'
	}, {
		text: '选项3',
		value: 'option3'
	}];
	const store = useStore()
	const userType = ref(1);
	const signer_type = ref('signer');
	const changeTypeShow = ref(false)
	const tabIndex_ = ref(0)
	const tabIndex = ref(0)
	const type = ref(1) //   1是我邀请的   2是被邀请的
	const sign_status = ref('')
	const keyword = ref('')
	const data = reactive({
		dataList: [],
	})
	const moreRef = ref(null);
	const moreObj = ref({
		returnFun: (value) => {
			switch (value.type) {
				case 'recipient':
					recipientObj.open(value.id);
					break;
				case 'audit':
					auditObj.open(value.id, 'audit');
					break;
				case 'sign':
					auditObj.open(value.id, 'sign');
					break;
			}
		},
		open: (item) => {
			moreRef.value.open(item);
		}
	})
	// 变更抄送人
	const recipientRef = ref(null);
	const recipientObj = reactive({
		open: (id) => {
			recipientRef.value.open(id);
		},
		returnFun: (item) => {
			paging.value.reload();
		},
	})
	// 变更审核人
	const auditRef = ref(null);
	const auditObj = reactive({
		open: (id, type) => {
			auditRef.value.open(id, type);
		},
		returnFun: (item) => {
			paging.value.reload();
		},
	})
	onShow(() => {
		userType.value = store.state.userType
		if (userType.value == 1) {
			tabIndex_.value = 1
			type.value = 2
		} else {
			tabIndex_.value = 0
			type.value = 1
		}
		if (type.value == 1) {
			signer_type.value = 'self';
		} else {
			signer_type.value = 'signer';
		}
		if (uni.getStorageSync('indexToContract')) {
			const index = uni.getStorageSync('indexToContract');
			tabIndex.value = index;
			sign_status.value = tabList[index].value;
			uni.setStorageSync('indexToContract', '');
		}
		if (paging.value?.reload) {
			paging.value.reload();
		}
	})
	const iconClick = async (url) => {
		if (!await authentication(store.state.userType)) {
			let msg = userType.value == 1 ? '请先实名认证' : '请先认证新企业'
			uni.$u.toast(msg)
			setTimeout(() => {
				goNav(arrayGet(pageUrl, `realnameUrl.${userType.value}`))
			}, 1500)
			return
		}
		goNav(arrayGet(pageUrl, url))
	}
	const paging = ref(null)
	const tabChange_ = (info) => {
		tabIndex_.value = info.index;
		if (tabIndex_.value == 0) {
			changeType(1)
		} else {
			changeType(2)
		}
		//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
		paging.value.reload();
	}
	const tabChange = (info) => {
		tabIndex.value = info.index;
		sign_status.value = info.value
		//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
		paging.value.reload();
	}
	const search = () => {
		paging.value.reload();
	}
	const clear = () => {
		keyword.value = '';
		paging.value.reload();
	}
	// onLoad((options) => {
	//   console.log(options);
	//   type.value = options.type ? options.type : 1;
	//   sign_status.value = options.sign_status ? options.sign_status : '';
	// })
	const changeType = (status) => {
		uni.setNavigationBarTitle({
			title: status == 1 ? '我发起的合同' : '邀请我的合同'
		});
		type.value = status
		changeTypeShow.value = false
		tabIndex.value = 0;
		keyword.value = ''
		sign_status.value = ''
		paging.value.reload();
		if (type.value == 1) {
			signer_type.value = 'self';
		} else {
			signer_type.value = 'signer';
		}
	}
	const queryList = (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			limit: pageSize,
			title: keyword.value,
			sign_status: sign_status.value
		}
		switch (userType.value) {
			case 1: // 个人
				if (type.value == 1) {
					memberinviteList(params).then(res => {
						paging.value.complete(res.data)
					})
				} else {
					membercontractList(params).then(res => {
						paging.value.complete(res.data)
					})
				}
				break;
			case 2: // 企业
				if (type.value == 1) {
					contractUserList(params).then(res => {
						paging.value.complete(res.data)
					})
				} else {
					contractList(params).then(res => {
						paging.value.complete(res.data)
					})
				}
				break;
		}
	}
</script>
<style scoped lang="scss" src="/static/css/contract/contractList.scss"></style>